<template>
	<view class="page-content">
		<f-navbar title="详情" bgColor="linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%)" fontColor="#ffffff"
			leftIconColor="#ffffff"></f-navbar>
		<view class="header-bg"></view>
		<!-- <view class="content-box" :style="{top:`${systemInfo.navBarH}px`}" v-if="taskInfo"> -->
		<view class="content-box"  v-if="taskInfo">
			<view>
				<view class="list-item">
					<view class="item-header flex align-center">
						<view class="flex-sub text-cut text-cut1">任务编号：{{taskInfo.taskCode}}</view>
						<view>
							{{getDictionaryName(orderStatusOptions,taskInfo.taskStatus)}}
							<!-- <text class="color3" v-if="taskInfo.taskStatus==0">待派单</text>
							<text class="color3" v-else-if="taskInfo.taskStatus==1">待收运</text>
							<text class="color2" v-else-if="taskInfo.taskStatus==2">已完成</text>
							<text class="color3" v-else-if="taskInfo.taskStatus==3">已取消</text>
							<text class="color1" v-else-if="taskInfo.taskStatus==4">收运中</text> -->
						</view>
					</view>
					<view class="item-middle">
						<view class="flex align-start item-step">
							<view class="item-check"></view>
							<view class="flex-sub item-right">
								<view class="item-title">
									<text>始发地</text>
									<text class="margin-left">{{taskInfo.emissionUnitName}}</text>
								</view>
								<view class="item-address">
									地址：{{taskInfo.emissionUnitAddress}}
								</view>
							</view>
							<view class="left-line"></view>
						</view>
						<view class="flex align-start item-step">
							<view class="item-check active"></view>
							<view class="flex-sub item-right">
								<view class="item-title">
									<text>目的地</text>
									<text class="margin-left">{{taskInfo.recycleBinName}}</text>
								</view>
								<view class="item-address">
									地址：{{taskInfo.recycleBinAddress}}
								</view>
								<!-- <view class="item-info">
									联系人：{{taskInfo.contact}} {{taskInfo.contactPhone}}
								</view> -->
							</view>
						</view>
					</view>
					<view class="item-bottom">
						<view class="item-info">派单时间：{{taskInfo.createTime}}</view>
						<view class="item-info-sm" v-if="taskInfo.recycleBinContact">联系人：{{taskInfo.recycleBinContact}}</view>
						<view class="item-info-sm" v-if="taskInfo.recycleBinPhone">联系人电话：{{taskInfo.recycleBinPhone}}</view>		
						<view class="item-info-sm" v-if="taskInfo.licensePlateNumber">车牌号码：{{taskInfo.licensePlateNumber}}</view>
						<view class="item-info-sm" v-if="taskInfo.recyclingCompanyName">收运公司：{{taskInfo.recyclingCompanyName}}</view>
						<view class="item-info-sm" v-if="taskInfo.driverName">收运司机：{{taskInfo.driverName}}</view>
						
						<view class="item-info-sm" v-if="taskInfo.oilName">油品：{{taskInfo.oilName}}</view>
						<view class="item-info-sm" v-if="taskInfo.barrelsNumber">桶数：{{taskInfo.barrelsNumber}}</view>
						<view class="item-info-sm" v-if="taskInfo.weight">预估重量：{{taskInfo.weight}}kg</view>
						<view class="item-info-sm" v-if="taskInfo.actualWeight">称重信息：{{taskInfo.actualWeight}}kg</view>
						
						<!-- <view class="item-info-sm" v-if="taskInfo.executionTaskStartTime">任务执行时间：{{taskInfo.executionTaskStartTime}}</view>
						<view class="item-info-sm" v-if="taskInfo.executionTaskEndTime">任务完成时间：{{taskInfo.executionTaskEndTime}}</view> -->
					</view>
				</view>
			</view>
			
			<view class="info-box">
				<view class="title-box">行驶路线</view>
				<view class="route-box">
					<image class="route-img" :src="taskInfo.routingPic" mode="aspectFill"></image>
					<!-- <view class="route-time">运输时间：{{taskInfo.executionTaskStartTime}}-{{taskInfo.executionTaskEndTime}}</view> -->
					<view class="route-time" >任务执行时间：{{taskInfo.executionTaskStartTime || ''}}</view>
					<view class="route-time" >任务完成时间：{{taskInfo.executionTaskEndTime || ''}}</view>
				</view>
			</view>
			<view class="title-center" v-if="taskInfo.alarmInformationList.length">消错记录</view>
			<view class="info-box" v-for="(item,index) in taskInfo.alarmInformationList">
				
				<view  class="error-box" style="margin: 0;">
					<view class="error-box" style="margin: 0;">报警类型：{{ getDictionaryName(policeTypeOptions,item.alarmType) }}</view>
					<view class="error-box">消错时间：{{ item.alarmTime }}</view>
					<view class="error-box">消错原因：{{item.remark || ''}}</view>
					<view class="img-box" v-if="item.sitePhotos">
						<image class="img-item" :src="v" mode="aspectFill"
							v-for="(v,k) in item.sitePhotos.split(',')" :key="index"></image>
					</view>
					<view class="error-box">
						处理结果：
						<text class="color1" v-if="item.status==0">待处理</text>
						<!--processingResults 处理状态 0未处理1同意2驳回 -->
						<text class="color1" v-if="item.status==1 && item.processingResults==0">已申请消错，待处理</text>
						<text class="color3" v-if="item.status==1 && item.processingResults==1">消错通过</text>
						<text class="color2" v-if="item.status==1 && item.processingResults==2">消错驳回</text>
					</view>
					<view class="error-box">处理描述：{{item.remark1 || ''}}</view>
					<view class="error-box">处理时间：{{item.processingTime || ''}}</view>
					
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getTaskDetail,
	} from "@/api/collection.js"
	export default {
		data() {
			return {
				pageData: {},
				taskInfo: null,
				orderStatusOptions:[],
				policeTypeOptions:[],
			};
		},
		onReady() {

		},
		onShow() {

		},
		onLoad(option) {
			this.pageData = option
			this.getDictionary()
			this.getData()
			

		},
		methods: {
			async getDictionary() {
				this.orderStatusOptions = await this.getDictionaryData("task_status");
				this.policeTypeOptions = await this.getDictionaryData('police_type');
			},
			getData() {
				getTaskDetail(this.pageData).then((res) => {
					this.taskInfo = {
						...res.data,
						...this.pageData
					};
				})
			},
		},

	};
</script>
<style lang="scss" scoped>
	.item-info-sm {
		margin-top: 20rpx;
		color: #666668;
		font-size: 30rpx;
	}

	.page-content {
		position: relative;

		.header-bg {
			width: 100%;
			top: 0;
			left: 0;
			z-index: 1;
			position: absolute;
			height: 400rpx;
			background: linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%);
		}

		.content-box {
			position: relative;
			z-index: 2;
			padding: 32rpx;
			.title-center{
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 32rpx;
			}
			.electric-info {
				.title-box {
					font-size: 32rpx;
					font-weight: bold;
				}

				.price-box {
					font-size: 30rpx;
					color: #138E57;
				}

				.box-info {
					padding: 0 32rpx;
					margin-top: 24rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.electric-item {
						padding: 32rpx 0;
						border-bottom: 1rpx solid #EFEFEF;

						&:last-child {
							border: none;
						}

						.item-logo {
							width: 125rpx;
							height: 125rpx;
							margin-right: 32rpx;
						}

						.item-info {
							.title {
								font-weight: bold;
								font-size: 34rpx;
								color: #000000;
							}

							.remark {
								font-size: 30rpx;
								color: #666668;
								margin-top: 20rpx;
							}
						}
					}
				}
			}

			.info-box {
				padding: 32rpx;
				margin-top: 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.title-box {
					font-size: 32rpx;
					font-weight: bold;
				}

				.img-box {
					margin-top: 20rpx;
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					grid-gap: 16rpx;

					.img-item {
						width: 196rpx;
						height: 196rpx;
					}
				}

				.route-box {
					margin-top: 20rpx;

					.route-img {
						width: 100%;
						height: 354rpx;
					}

					.route-time {
						margin-top: 20rpx;
						font-size: 30rpx;
						color: #000000;
					}
				}

				.error-box {
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #000000;

					.error-status {
						margin: 20rpx 0;
						padding: 14rpx 20rpx;
						background: #f1f1f1
					}
					.color1 {
						color: #FC880C;
					}
					
					.color2 {
						color: #DF0E0E;
					}
					.color3 {
						color: #138E57;
					}
				}
			}
		}
	}

	.list-item {
			margin-bottom: 32rpx;
			background: #ffffff;
			border-radius: 18rpx;
			padding: 0 32rpx;
	
			.item-header {
				padding: 20rpx 0;
				font-size: 30rpx;
				color: #000000;
				border-bottom: 1rpx solid #EFEFEF;
	
				.color1 {
					color: #FC880C;
				}
	
				.color2 {
					color: #138E57;
				}
	
				.color3 {
					color: #666668;
				}
			}
	
			.item-middle {
				padding: 30rpx 0;
	
				.item-step {
					position: relative;
	
					.left-line {
						height: calc(100% - 16rpx);
						width: 2rpx;
						background: #EFEFEF;
						position: absolute;
						left: 7rpx;
						top: 31rpx;
					}
	
					.item-check {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background: #138E57;
						margin-right: 20rpx;
						margin-top: 15rpx;
	
						&.active {
							background: #FC880C;
						}
					}
	
					.item-right {
						.item-title {
							font-size: 34rpx;
							font-weight: bold;
							color: #000000;
						}
	
						.item-address {
							margin-top: 16rpx;
							color: #666668;
							font-size: 30rpx;
							margin-bottom: 16rpx;
						}
					}
				}
	
			}
	
			.item-info {
				color: #666668;
				font-size: 30rpx;
			}
	
			.item-bottom {
				border-top: 1rpx solid #EFEFEF;
				padding: 20rpx 0 30rpx;
	
				.option-box {
					margin-top: 20rpx;
				}
	
				.item-info-sm {
					margin-top: 20rpx;
					color: #666668;
					font-size: 30rpx;
				}
			}
		}
	
</style>